<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            width: 600px;
            margin: 20px auto;
        }

        h1 {
            text-align: center;
        }

        p {
            text-align: center;
            color: #666;
            margin: 20px 0;
        }

        .row {
            /* 开启弹性布局 */
            display: flex;
            height: 40px;
            /* 水平方向居中 */
            justify-content: center;
            /* 垂直方向居中 */
            align-items: center;
        }
        .row span{
            width: 80px;
        }
        .row input{
            width: 200px;
            height: 30px;
        }
        .row button{
            width: 280px;
            height: 30px;
            color: white;
            background-color: orange;
            border: none;
            border-radius: 5px;
        }

        .row button:active{
            background-color: #666;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>表白墙</h1>
    <p>输入点击后提交，会将信息显示在表格中</p>
    <div class="row">
        <span>谁:</span>
        <input type="text">
    </div>
    <p></p>
    <div class="row">
        <span>对谁:</span>
        <input type="text">
    </div>
    <p></p>
    <div class="row">
        <span>说什么:</span>
        <input type="text">
    </div>
    <p></p>
    <div class="row">
        <button id="submit">提交</button>
    </div>
    <p></p>
    <div class="row">
        <button id="revert">撤销</button>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js">

</script>
<script>
        // 实现提交操作. 点击提交按钮, 就能够把用户输入的内容提交到页面上显示.
        // 点击的时候, 获取到三个输入框中的文本内容
        // 创建一个新的 div.row 把内容构造到这个 div 中即可.
        let container=document.querySelector('.container');
        let inputs=document.querySelectorAll('input');
        let button=document.querySelector('#submit');
        button.onclick=function(){
            let from=inputs[0].value;
            let to = inputs[1].value;
            let msg=inputs[2].value;

            if(from==''|| to==''||msg=='')
            {
                return;
            }
            let rowDiv=document.createElement('div');
            rowDiv.className='row message';
            rowDiv.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
            container.appendChild(rowDiv);

            for(let elem of inputs)
            {
                elem.value='';
            }

            let body={
                "from":from,
                "to":to,
                "message":msg
            };
            //服务器发起post请求，将数据提交到服务器里

            let strbody=JSON.stringify(body);
            console.log("strbody: "+strbody);
            $.ajax({
                type:'post',
                url:"Love",
                data:strbody,
                contentType:"application/json;charset=utf8",
                success:function(body)
                {
                    console.log("数据发布成功！！！");
                }
            });

        }
        let revertButton = document.querySelector('#revert');
        revertButton.onclick = function() {
            // 删除最后一条消息. 
            // 选中所有的 row, 找出最后一个 row, 然后进行删除
            let rows = document.querySelectorAll('.message');
            if (rows == null || rows.length == 0) {
                return;
            }
            container.removeChild(rows[rows.length - 1]);
        }



        // 页面加载的时候，发送get请求，从服务器获取数据并添加到页面中
        $.ajax({
                type:'get',
                url:"Love",
                success:function(body)
                {
                    //此处原本是js数组
                    //本来服务器要返回一个json的对象，但是jqury的json自动识别帮我们转换为js对象数组
                    let container=document.querySelector('.container');
                    for(let message of body)
                    {
                        let rowDiv=document.createElement('div');
                        rowDiv.className='row message';
                        rowDiv.innerHTML = message.from + ' 对 ' + message.to + ' 说: ' + message.message;
                        container.appendChild(rowDiv);
                    }
                }

            });
    </script>

</body>
</html>